<template>
  <div class="pages-contain-view">
    <el-card>
      <!-- 表格 -->
      <el-table v-loading="tableLoad" :data="complexTableData" stripe style="width: 100%">
        <el-table-column prop="title" label="标题">
        </el-table-column>
        <el-table-column prop="author" label="作者">
        </el-table-column>
        <el-table-column prop="date" sortable label="出版时间">
        </el-table-column>
        <el-table-column label="封面">
          <template slot-scope="scope">
            <el-button type="text" @click="previewImg(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="evaluate" sortable label="评分">
        </el-table-column>
        <el-table-column label="是否上架">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.putaway">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="editComplexInfo(scope.$index,scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteComplexInfo(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 预览图片 -->
      <el-dialog title="预览封面" :visible.sync="preview.flag" width="max-content" center>
        <img :src="preview.img" alt="">
      </el-dialog>
      <!-- 编辑 -->
      <el-dialog title="编辑" :visible.sync="editFlag">
        <el-form :model="editForm">
          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="editForm.title" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="作者" :label-width="formLabelWidth">
            <el-input v-model="editForm.author" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="日期" :label-width="formLabelWidth">
            <el-date-picker v-model="editForm.date" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="编号" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="editForm.guid" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否上架" :label-width="formLabelWidth">
            <el-switch v-model="editForm.putaway">
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editFlag = false">取 消</el-button>
          <el-button type="primary" @click="submitEditComplex">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { complexTable } from "@/api/table";
export default {
  data() {
    return {
      complexTableData: [],
      tableLoad: false,
      //预览图片
      preview: {
        img: "",
        flag: false
      },
      //编辑
      editForm: {
        title: "",
        author: "",
        date: "",
        putaway: true,
        guid: ""
      },
      //编辑条目
      editComplexIndex: 0,
      formLabelWidth: "80px",
      editFlag: false
    };
  },
  mounted() {
    this.getComplexTable();
  },
  methods: {
    async getComplexTable() {
      this.tableLoad = true;
      let res = await complexTable();
      if (res) {
        this.tableLoad = false;
        this.complexTableData = res;
      }
    },
    //预览图片
    previewImg(row) {
      this.preview.flag = true;
      this.preview.img = row.cover;
      // console.log(row);
    },
    //编辑行
    editComplexInfo(ind, row) {
      this.editComplexIndex = ind;
      this.editFlag = true;
      this.editForm = Object.assign({}, row);
    },
    //提交修改
    submitEditComplex() {
      let complexTableData = this.complexTableData;
      for (let item of complexTableData) {
        if (item.guid === this.editForm.guid) {
          let ind = complexTableData.indexOf(item);
          complexTableData.splice(ind, 1, this.editForm);
          break;
        }
      }
      this.editFlag = false;
      this.$message({
        type: "success",
        message: "修改成功!"
      });
      // this.complexTableData[this.editComplexIndex] = this.editForm;
    },
    //删除行
    deleteComplexInfo(ind) {
      this.$confirm("此操作将永久删除该条目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // console.log(this.complexTableData.length)
          this.complexTableData.splice(ind, 1);
          // console.log(this.complexTableData.length)
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped>
</style>